<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>第四节课</title>
		<style type="text/css">
			/*去除原来样式*/
			
			* {
				padding: 0;
				margin: 0;
			}
			
			.container {
				width: 100vw;
				height: 100vh;
				display: flex;
				/*
				 * 将边框设置在中间
				 */
				align-items: center;
				justify-content: center;
			}
			
			canvas {
				width: 500px;
				height: 500px;
				border: 1px solid #333333;
			}
			
			/*.anniu{
				width: 100px;
				height: 100px;
				
			}*/
		</style>
	</head>

	<body>
		<!--<img id="img" src="cut.jpeg" alt="" />-->
		<div class="container">
			<canvas id="canvas" width="500" height="500"></canvas>
			<div class="anniu">
				<input type="button" name="" id="rotate" value="旋转起来" />
				<input type="button" name="" id="stop" value="停止" />
				<input type="button" name="" id="refresh" value="刷新" />
				
			</div>	
			
		</div>
	</body>

	<script>
		
		
		window.onload = function(){
			
			let oCanvas = document.getElementById("canvas");
			let pen = oCanvas.getContext("2d");
			
			//rotate(角度)
			pen.fillStyle = "chocolate";
			
			let x = 75;
				y = 75;
				width = 350;
				height = 350;
			start();	
			function start(){
				//pen.fillRect(x,y,width,height);
				pen.translate(x + width/2,y + height/2);
				pen.rotate(Math.PI/180*45);
				pen.translate(-(x+width/2),-(y+height/2));
				pen.fillRect(x,y,width,height);
			}
			
			let timer;
			
			let rotate = document.getElementById("rotate");
			rotate.onclick = function(){
				
				//可以让他沿着中心点旋转
				/*pen.translate(x + width/2,y + height/2);
				pen.rotate(Math.PI/180*30);
				pen.translate(-(x+width/2),-(y+height/2));
				pen.fillRect(x,y,width,height);
				*/
				
				clearInterval(timer);
					//添加定时器，代入数值
					timer = setInterval(function(){
						for(var i=0;i<=90;i++){	
							pen.translate(x + width/2,y + height/2);
							pen.rotate(Math.PI/180*i);
							pen.translate(-(x+width/2),-(y+height/2));
							//pen.clearRect(0,0,500,500);
							
							//随机改变颜色
							pen.fillStyle = "#"+Math.round(Math.random()*1000000);
							pen.fillRect(x,y,width,height);
						}	
					},50);
					
			}
			
			let stop = document.getElementById("stop");
			stop.onclick = function(){
				clearInterval(timer);
			}
			
			let refresh = document.getElementById("refresh");
			refresh.onclick = function(){
				pen.clearRect(0,0,500,500);
				x = 75;
				y = 75;
				width = 350;
				height = 350;
				start();
			}
			
		}
			
	</script>

</html>